@import "../../commonFunc";

.video_component_module {
    ul {
        li {
            width: calc((100% / 6) - 16px);
            margin: px2rem(8);
            @include position(relative);
            border: 1px solid rgba(175, 137, 98, .6);
            @include bgColor(rgba(255, 255, 255, .4));
            height: px2rem(156);

            video {
                @include widthHeight(100%, px2rem(124));
                object-fit: cover;
            }

            p {
                @include lineHeight(px2rem(30));
                padding: 0 px2rem(15);
                @include visibleFont;
                margin-top: px2rem(-6);
                @include color(#6E4B30);
                @include fontSize;
            }

            .duration {
                @include position;
                @include trbl(px2rem(5), px2rem(5), '', '');
                height: px2rem(24);
                @include displayFlex;
                padding: 0 px2rem(10);
                @include bgColor(rgba(0, 0, 0, .3));
                @include color(white);
                @include fontSize;
                border-radius: px2rem(24);
            }

            .play_video {
                @include position;
                height: px2rem(24);
                @include trbl(px2rem(50), 0, '', 0);
                @include displayFlex;

                .anticon {
                    @include fontSize(px2rem(25));
                    @include color(white);
                    cursor: pointer;
                    transition: .3s linear;
                }

                &:hover {
                    opacity: .8;
                }
            }

            .full_screen {
                @include position;
                @include trbl('', px2rem(5), px2rem(29), '', 10);
                @include color(white);
                @include fontSize(px2rem(20));
                cursor: pointer;

                &:hover {
                    opacity: .8;
                }
            }
        }
    }
}